<template>
	<view class="mainBox">
		<uni-section class="mb-5" title="选择服务场次" type="line"></uni-section>
		<uni-row class="demo-uni-row" :gutter="20">
			<view class="timeBox">
				<uni-col :span="12" v-for="(item, index) in info" :key="index">
					<view class="time" :class="timeck==item.id?'timeck':''">{{item.time}}</view>
				</uni-col>
			</view>
		</uni-row>
		<uni-forms ref="form" :modelValue="baseFormData">
			<uni-section class="mb-5" title="您的称呼" type="line"></uni-section>
			<view class="formBox">
				<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
			</view>
			<uni-section class="mb-5" title="您的性别" type="line"></uni-section>
			<view class="formBox">
				<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
			</view>
			<uni-section class="mb-5" title="手机号" type="line"></uni-section>
			<view class="formBox">
				<uni-easyinput v-model="baseFormData.phone" placeholder="请输入手机号" />
			</view>
			<uni-section class="mb-5" title="微信号" type="line"></uni-section>
			<view class="formBox">
				<uni-easyinput v-model="baseFormData.wechar" placeholder="请输入微信号" />
			</view>
			<uni-section class="mb-5" title="电子邮箱/Email" type="line"></uni-section>
			<view class="formBox">
				<uni-easyinput v-model="baseFormData.email" placeholder="电子邮箱/Email" />
			</view>
			<uni-section class="mb-5" title="备注" type="line"></uni-section>
			<view class="formBox">
				<uni-easyinput type="textarea" v-model="baseFormData.beizhu" placeholder="请输入自我介绍" />
			</view>
		</uni-forms>
		<view class="primaryBox">
			<button type="primary" @click="submit('baseFormData')">提交</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeck: 1,
				baseFormData: {
					name: '',
					phone: '',
					wechar: '',
					email: '',
					beizhu: ''
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				info: [{
						id: 1,
						time: '09:30开始'
					},
					{
						id: 2,
						time: '10:30开始'
					},
					{
						id: 3,
						time: '11:30开始'
					},
					{
						id: 4,
						time: '12:30开始'
					},
					{
						id: 5,
						time: '13:30开始'
					}
				]
			}
		},
		onLoad() {

		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.baseFormData.setRules(this.customRules)
		},
		methods: {
			submit(ref) {
				uni.navigateTo({
					url: '/pages/index/order'
				})
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		background: #fff;
	}

	.primaryBox {
		padding: 30rpx 20rpx 50rpx;
	}

	.formBox {
		padding: 0 20rpx;
		overflow: hidden;
		background: #fff;
	}

	.timeBox {
		padding: 0 20rpx;
		overflow: hidden;

		.timeck {
			background: #2979ff !important;
			border: 1px solid #2979ff !important;
			color: #fff !important;
		}

		.time {
			width: 100%;
			text-align: center;
			border-radius: 10rpx;
			line-height: 70rpx;
			box-sizing: border-box;
			border: 1px solid #999;
			color: #333;
			margin: 10rpx 0;
		}
	}
</style>